<template>
	<view class="service_information">
		<view class="server_title">服务信息</view>
		<view class="hotel_name" @tap = "openHotel(options.id)">
			<view class="img">
				<image src="/static/icon/hotel-icon.png" mode=""></image>
			</view>
			<view class="text">
				{{options.name || '酒店名称'}}
			</view>
			<view class="icon">
				<image src="/static/icon/right.png" mode="">
					
				</image>
			</view>
		</view>
		<view class="hotel_adress" @tap="address(options)">
			<view class="img">
				<image src="/static/icon/adress-blue.png" mode=""></image>
			</view>
			<view class="text">
				{{options.hotel_address|| '酒店地址'}}
			</view>
			<view class="icon">
				<image src="/static/icon/right.png" mode="">
					
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		
		props: {
			options: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		methods: {
			openHotel(id){
				uni.navigateTo({
					url: '/pages/cleaner/hotel/hotel?id=' + id
				});
			},
			address(item){
				
				this.mapNavigation(item.hotel_latitude,item.hotel_longitude,item.name);
			
			}
		},
		mounted(){
			
		},
		computed:{
			
		}
	}
</script>

<style scoped lang="scss">
	.service_information{
		width: 100%;
		padding: 52upx 24upx 30upx 24upx;
		// margin-bottom: 50upx;
		box-sizing: border-box;
		background: #FFFFFF;
		.server_title{
			font-size: 32upx;
			color: #333333;
			line-height: 1;
		}
		.hotel_name{
			margin-top: 32upx;
			height: 57upx;
			position: relative;
		}
		.img{
			float: left;
			height: 28upx;
			width: 28upx;
			image{
				width: 100%;
				height: 100%;
				float: left;
			}
		}
		.text{
			float: left;
			margin-left: 20upx;
			font-size: 28upx;
			line-height: 1;
			color: #333333;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap
		}
		.icon{
			float: right;
			height: 28upx;
			width: 28upx;
			image{
				width: 100%;
				height: 100%;
				float: left;
			}
		}
		.hotel_name:after{
			position: absolute;
			content: '';
			background: #e5e5e5;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1upx;
			transform:scaleY(0.5);
		}
		.hotel_adress{
			height: 57upx;
			margin-top: 29upx;
			.text{
				width: calc(100% - 100upx);
			}
		}

	}
</style>
